<template>
    <div style="width: 100%;">
        <NCard class="card" title="参考项目">
            <NSpace vertical>
                <n-input v-model:value="searchValue" type="text" placeholder="搜索" />
                <NCard v-for="item in showset" :key="item.title" hoverable style="cursor: pointer;"
                    @click="handelItemClick(item.title)">
                    <n-thing :title="item.title" content-style="margin-top: 10px;">
                        <template #description>
                            <n-space size="small" style="margin-top: 4px">
                                <n-tag :bordered="false" type="info" size="small">
                                    {{ item.grade }}
                                </n-tag>
                            </n-space>
                        </template>
                        <NCollapseTransition v-show="showStatus[item.title]" style="margin-top: 10px;">
                            <NList hoverable>
                                <NListItem v-for="analyse in item.analyse" :key="analyse">
                                    {{ analyse }}
                                </NListItem>
                            </NList>
                        </NCollapseTransition>
                    </n-thing>
                </NCard>
            </NSpace>
        </NCard>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { NCard, NList, NListItem, NThing, NTag, NSpace, NCollapseTransition, NInput } from "naive-ui";
import { computed, ref } from "vue";
import projectUtils from "@/api/project";

function isTextSelected() {
    var selection = window.getSelection()
    return selection && selection.rangeCount > 0 && !selection.isCollapsed
}


const showStatus = ref({} as Record<string, boolean>);

const searchValue = ref("");

function checkIfShow(item: any) {
    if (!searchValue.value) {
        showStatus.value[item.title] = false;
        return true;
    }
    let f = false;
    item.analyse.forEach((element: string) => {
        if (element.toLowerCase().includes(searchValue.value.toLowerCase())) {
            f = true;
        }
    });

    if (f) {
        showStatus.value[item.title] = true;
    }



    if (item.title.includes(searchValue.value)) {
        return true;
    }

    return f;

}

function handelItemClick(title: string) {
    if (!isTextSelected()) {
        showStatus.value[title] = !showStatus.value[title];
    }



}

const dataset = ref([] as any[]);

const showset = computed(() => {
    return dataset.value.filter(item => checkIfShow(item));
});

projectUtils.list().then((res) => {
    console.log(res);
    dataset.value = res;
}).catch((err) => {
    console.log(err);
});


</script>


<style scoped>
@media (max-width: 599px) {
    .card {
        width: calc(599px - 200px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 600px) {
    .card {
        width: calc(100% - 200px);
        margin-left: 100px;
        margin-right: 100px;
    }
}

.card {
    margin-top: 1rem;
}
</style>